<!doctype html>
<html>
<head>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/flex.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/h5.js"></script>
	<title>XuLuo</title>
</head>
<body>
	<div class="wrap" style="margin: 20px auto;display: table">
		<a href="javascript:;" class="btn" id="sub">第一种提示信息</a>
	</div>
	<div class="wrap" style="margin: 20px auto;display: table">
		<a href="javascript:;" class="btn" id="sub2">第二种提示信息</a>
	</div>
	<div class="wrap" style="margin: 20px auto;display: table">
		<a href="javascript:;" class="btn" id="sub3">第三种提示信息</a>
	</div>
	<script>
		// 第一种
		var toast=function(option){
			var ele=document.createElement('div');
			ele.className="toast";
			if(!option.btnText){	
				option.btnText='<a href="javascript:;" class="btn btn2 cancel">取消</a><a href="javascript:;" class="btn btn2 confirm">确认</a>';
			}else if('string' == typeof option.btnText){
				option.btnText='<a href="javascript:;" class="btn confirm">'+option.btnText+'</a>';
			}else{
				option.btnText='<a href="javascript:;" class="btn btn2 cancel">'+option.btnText[0]+'</a>'+'<a href="javascript:;" class="btn btn2 confirm">'+option.btnText[1]+'</a>';
			}
			if(option.icon=='success'){
				option.icon='<img src="images/success.png" class="icon"/>';
			}else if(option.icon=='fail'){
				option.icon='<img src="images/fail.png" class="icon"/>';
			}else{
				option.icon='';
			}
			if(option.title){
				option.title='<div class="title blue">'+option.title+'</div>';
			}else{
				option.title='';
			}
			$(ele).html('<div class="cont">'+option.title+option.icon+
							'<div class="text">'+option.content+'</div>'+
							'<div class="btnW">'+option.btnText+'</div>'+
						'</div>');
			$('body').append(ele);
			$(ele).show();
			$(ele).find('.cancel').on('click',function(){
				$(ele).remove();
				if(option.cancelFun)option.cancelFun();
			});
			$(ele).find('.confirm').on('click',function(){
				$(ele).remove();
				if(option.confirmFun)option.confirmFun();
			});
		};
		$('#sub').click(function(){
			toast({
				title:'提示信息',
		        content:'暂时不支持网页还款哦！',
		        icon:'fail', //success:成功图标，fail:失败图标
		        btnText:['取消了','确定了'],//两个按钮，['取消了','确定了']
		        cancelFun:function(){
		          console.log('取消回调');
		        },
		        confirmFun:function(){
		          console.log('确认回调');
		        }
		    });
		});
		// 第二种
		var tipTimer=null,tipTimer2=null;
		var tip=function(text){
			clearTimeout(tipTimer);
			clearTimeout(tipTimer2);
			if($('.tipW').length>0){$('.tipW').remove();}
			var ele=document.createElement('div');
			ele.className="tipW";
			$(ele).css({'position':'fixed','z-index':'1000','padding':'10px 20px','text-align':'center','font-size':'14px','top':'50%','display':'table','left':'50%','-webkit-transform':'translate(-50%, 0)','transform':'translate(-50%, 0)','background':'rgba(0, 0, 0, .8)','color':'#fff','opacity':'1','-webkit-transition':'all .6s','transition':'all .6s','border-radius':'8px','max-width':'80%'});
			$(ele).html(text);
			$('body').append(ele);
			tipTimer=setTimeout(function(){
				$(ele).css({'top':'-200px'});
				tipTimer2=setTimeout(function(){
					$('.tipW').remove();
				},600);
			},1500);
		};
		$('#sub2').on('click',function(){
			tip('简单的提示语');
		});
		// 第三种
		var select=function(option){
		    var ele=document.createElement('div'),li='',li2='';
		    ele.className="select";
		    $(option.data).each(function(i){
		        li=li+'<li flex="main:justify">'+option.data[i]+'<font class="cir"></font></li>';
		    });
		    var list='<ul class="list">'+li+'</ul>';
		    if(option.link){
		        $(option.data).each(function(i){
		            li2=li2+'<li flex="main:justify"><a href="'+option.link[i]+'">'+option.data[i]+'</a><font class="cir"></font></li>';
		        });
		        list='<ul class="list link">'+li2+'</ul>';
		    }
		    var txt='<div class="cont">'+
		                '<div class="head" flex="main:justify">'+
		                    '<a href="javascript:;" class="cancel">取消</a>'+option.title+'<a href="javascript:;" class="confirm">确定</a>'+
		                '</div>'+list+
		            '</div>';
		    $(ele).html(txt);
		    $('body').append(ele);
		    var curr=event.currentTarget;
		    $(ele).find('.cancel').on('click',function(){
		        $(ele).remove();
		        if(option.cancelFun)option.cancelFun();
		    });
		    $(ele).find('.confirm').on('click',function(){
		        if($(ele).find('li').hasClass('active')){
		            $(curr).text($(ele).find('li.active').text());
		        }
		        if($('.select .list').hasClass('link')){
		            window.location.href=$('.select .list li.active').find('a').attr('href');
		        }
		        $(ele).remove();
		        if(option.confirmFun)option.confirmFun();
		    });
		    $(ele).find('li').each(function(){
		        if($(curr).text()==$(this).text()){
		            $(this).addClass('active').siblings().removeClass('active');
		        }else{
		            $(this).removeClass('active');
		        }
		    });
		    $(ele).find('li').click(function(){
		        $(this).toggleClass('active').siblings().removeClass('active');
		    });
		};
		$('#sub3').click(function(){
			select({
				title:'测试一下',
				data:['列表一','列表二'],
				link:['http://www.baidu.com','http://www.baidu.com']
			});
		});
	</script>
</body>
</html>